import {
  Button,
  Divider,
  Form,
  FormItem,
  message,
  Select,
  Textarea
} from 'ant-design-vue'
import { defineComponent, nextTick, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Input } from 'vxe-table'

import aiTestSkinApi from '@/apis/aiTestSkinApi'
import { editCopyWriting } from '@/apis/aiTestSkinTypes'
import { useBack } from '@/hooks'
import router from '@/router'
import aiSkinTest from '@/router/routes/aiSkinTest'

export default defineComponent({
  setup() {
    const { handleCancel } = useBack('refreshSupplierList')
    const data = ref({} as editCopyWriting)
    onMounted(() => {
      getApplyDetail()
    })

    async function getApplyDetail() {
      try {
        data.value = await aiTestSkinApi.getDetectionCopyList(route.query.id)
        console.log(data.value.suggestion, 'formModel')
      } finally {
      }
    }
    const route = useRoute()
    function cancel() {
      handleCancel()
    }
    const btLoading = ref(false)
    async function handleConfirm() {
      try {
        btLoading.value = true
        await aiTestSkinApi
          .editDetectionCopy({
            comprehensive: data.value.comprehensive,
            id: data.value.id,
            popularScienceCopy: data.value.popularScienceCopy,
            suggestion: data.value.suggestion
          })
          .then(() => {
            handleCancel()
            message.success('保存成功')
          })
      } finally {
        btLoading.value = false
      }
    }
    return {
      data,
      btLoading,
      getApplyDetail,
      cancel,
      handleConfirm
    }
  },
  render() {
    return (
      <div>
        <Form labelCol={{ span: 2 }}>
          <FormItem label="分析维度:">
            <Select
              disabled
              v-model:value={this.data.analysisDimension}
              style={{ width: '250px' }}
            ></Select>
          </FormItem>
          <FormItem label="分析程度:">
            <Select
              disabled
              v-model:value={this.data.degreeAnalysis}
              style={{ width: '250px' }}
            ></Select>
          </FormItem>
          <FormItem label="建议文案:">
            <Textarea
              rows={5}
              v-model:value={this.data.suggestion}
              style={{ width: '400px' }}
            ></Textarea>
          </FormItem>
          <FormItem label="科普文案:">
            <Textarea
              rows={5}
              v-model:value={this.data.popularScienceCopy}
              style={{ width: '400px' }}
            ></Textarea>
          </FormItem>
          <FormItem label="综合文案:">
            <Textarea
              rows={5}
              v-model:value={this.data.comprehensive}
              style={{ width: '400px' }}
            ></Textarea>
          </FormItem>
          <Divider></Divider>
          <FormItem>
            <Button
              style={{
                width: '200px',
                height: '45px',
                marginLeft: '135px',
                marginRight: '50px'
              }}
              onClick={this.cancel}
            >
              取消
            </Button>
            <Button
              loading={this.btLoading}
              type="primary"
              style={{ width: '200px', height: '45px' }}
              onClick={() => this.handleConfirm()}
            >
              保存
            </Button>
          </FormItem>
        </Form>
      </div>
    )
  }
})
